<template>
  <view class="titleInfo">
    <view v-for="(item, i) of arrList" :key="i" @click="blackTitle(item, i)">
      <view
        :style="{
          paddingLeft: i * 22 + 'rpx',
        }"
        :class="i == index - 1 || index == 0 ? 'title1' : 'title'"
      >
        <span>{{ item.companyName }} </span>
        <span v-if="i != index - 1 && index != 0">--></span>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    titleArr: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      arrList: [],
      index: 0,
    };
  },
  mounted() {
    this.arrList = this.titleArr;
  },
  watch: {
    titleArr(newval) {
      this.arrList = newval;
      this.index = newval.length;
    },
  },
  methods: {
    blackTitle(item, i) {
      if (i == this.arrList.length - 1) {
        this.$emit("showInfo");
      } else {
        let arr = this.arrList;
        this.arrList = arr.slice(0, i + 1);
        this.$emit("blackInfo", { item, arrList: this.arrList });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.titleInfo {
  width: 100%;
  margin-bottom: 2vh;
  font-size: 0.9rem;
  font-family: Source Han Sans CN;

  .title {
    color: #818181;
    padding: 12rpx 0;
  }
  .title1 {
    color: #2196f3;
    padding: 12rpx 0;
  }
}
</style>